<template>
  <div class="bigbox">
    <div class="topbox" >
      <el-form
        :model="form"
        ref="form"
        label-position="left"
        label-width="80px"
        onsubmit="return false"
      >
        <el-row :gutter="20">
          <el-col :span="5">
          <el-form-item label="用电企业">
            <el-select
              v-model="bizOrgName"
              style="width: 100%"
              size="small"
              ref="shou"
            >
              <el-option
                class="option"
                :lable="form.bizOrgName"
                value="value"
                suffix-icon="el-icon-date"
              >
                <el-tree
                  :props="props"
                  :load="loadNode"
                  lazy
                  @node-click="handleNodeClick"
                  ref="tree"
                >
                </el-tree>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="报警等级">
            <el-select
              v-model="form.alarmLevel"
              style="width: 100%"
              size="small"
            >
              <el-option
                v-for="(item, index) in dengjilist"
                :key="index"
                :label="item.name"
                :value="item.alarmLevel"
                class="dengji"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="报警设备">
            <el-select v-model="form.screenId" style="width: 100%" size="small">
              <el-option
                v-for="(item, index) in shebeilist"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="查询日期">
            <el-date-picker
              v-model="date"
              size="small"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4" style="text-align: right;margin-top: 4px;">
          <el-button @click="chongzhi" size="small">重 置</el-button>
          <el-button @click="submit" size="small" type="primary">查 询</el-button>
        </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="titlebox">
        <div class="text">历史报警</div>
        <div class="right">
          <el-button
            type="primary"
            size="small"
            @click="daochu"
          >
            <i class="el-icon-upload2">导出</i>
          </el-button>
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <span style="cursor: pointer;margin: 0 10px;" @click="shuaxin"
              ><i class="el-icon-refresh-right"></i
            ></span>
          </el-tooltip>
          <el-dropdown trigger="click" @command="command">
            <span class="el-dropdown-link">
              <el-tooltip
                class="item"
                effect="dark"
                content="密度"
                placement="top"
              >
                <span style="cursor: pointer"
                  ><i class="el-icon-d-caret"></i
                ></span>
              </el-tooltip>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="默认">默认</el-dropdown-item>
              <el-dropdown-item command="中等">中等</el-dropdown-item>
              <el-dropdown-item command="紧凑">紧凑</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="table">
        <template>
          <el-table
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            height="calc(100% - 1px)"
              style="width: 100%"
            v-loading="loading"
            :data="tableData"
            border
            id="exportTabyong"
            ref="table"
            :size="iissize"
          >
            <el-table-column
              fixed
              label="序号"
              type="index"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column
              fixed
              prop="eventLevelName"
              label="告警等级"
              align="center"
              width="100"
            >
            </el-table-column>
            <el-table-column prop="orgName" label="用电企业" width="220">
            </el-table-column>
            <el-table-column
              prop="switchRoom"
              label="配电房"
              align="center"
              width="250"
            >
            </el-table-column>
            <el-table-column prop="devName" label="设备名称" width="210">
            </el-table-column>
            <el-table-column
              prop="measureName"
              label="告警信号"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="eventDesc" label="告警描述" width="340">
            </el-table-column>
            <el-table-column
              prop="alarmTime"
              label="告警时间"
              align="center"
              width="220"
            >
            </el-table-column>
            <el-table-column
              prop="alarmValue"
              label="告警值"
              align="right"
              width="80"
            >
            </el-table-column>
            <el-table-column prop="isReturn" align="center" label="复归">
              <template #default="{ row }">
                <span>{{ row.isReturn ? '是' : '否' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="20"
            :current-page.sync="pageobj._pageNo"
            @current-change="getdatalist"
            :total="+totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getloginuserapi, getyonghuxialaapi } from '@/api/cycle'
import {
  gettreelist,
  gettreexiaji,
  getgaojinlistapi,
  exportgaojinlistapi
} from '../../api/userscreen'
export default {
  name: 'LargeScreenIndex',

  data() {
    return {
      bizOrgName: '',
      form: { alarmLevel: '' },
      date: [],
      iissize: 'medium',
      dengjilist: [
        { name: '全部', alarmLevel: '' },
        { name: '严重', alarmLevel: '3' },
        { name: '普通', alarmLevel: '2' },
        { name: '轻微', alarmLevel: '1' }
      ],
      shebeilist: [],
      qiyelist: [],
      props: {
        label: 'bizOrgName'
        // children: 'children'
      },
      loading: false,
      tableData: [],
      pageobj: {
        _pageNo: 0,
        _pageSize: 20
      },
      totalCount: ''
    }
  },

  async mounted() {
    await this.getchushihua()
    this.gettime()
    this.getdatalist()
  },

  methods: {
    async getchushihua() {
      const re = await getloginuserapi()
      if (re.data.entity.orgType !== '04') {
        const res = await gettreelist()
        this.bizOrgName = res.data.list[0].bizOrgName
        this.form.orgNo = res.data.list[0].bizOrgNo
        this.form.orgType = res.data.list[0].bizOrgType
      } else {
        const res = await getyonghuxialaapi()
        this.bizOrgName = res.data.list[0].bizOrgName
        this.form.orgNo = res.data.list[0].bizOrgNo
        this.form.orgType = res.data.list[0].bizOrgType
      }
    },
    async getdatalist() {
      this.loading = true
      const res = await getgaojinlistapi({
        ...this.form,
        startDate: this.date[0],
        endDate: this.date[1],
        _pageNo: this.pageobj._pageNo - 1,
        _pageSize: this.pageobj._pageSize
      })
      this.totalCount = res.data.totalCount
      this.tableData = res.data.list
      this.loading = false
    },
    // 获取时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.date = []
      this.date.push(year + '-' + month + '-' + '01')
      this.date.push(year + '-' + month + '-' + day)
    },
    // 折叠导航栏
    zedie() {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 140
      } else {
        this.isheight = 80
      }
    },
    // 导出
    async daochu() {
      const res = await exportgaojinlistapi({
        ...this.form,
        startDate: this.date[0],
        endDate: this.date[1],
        ...this.pageobj,
        isParams: true
      })
      const blobContent = new Blob([res])
      const url = window.URL.createObjectURL(blobContent)
      saveAs(url, '历史报警.xls')
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 查询
    submit() {
      this.getdatalist()
    },
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    // 树组件懒加载
    async loadNode(node, resolve) {
      const re = await getloginuserapi()

      if (re.data.entity.orgType !== '04') {
        const res = await gettreelist()
        if (node.level === 0) {
          // 初始的级数（最顶层）
          return resolve(res.data.list) // 最顶层数据渲染为region
        }
        const ress = await gettreexiaji({ orgNo: node.data.bizOrgNo })
        if (node.level === 1) {
          return resolve(ress.data.list)
        } else if (node.level === 2) {
          return resolve([])
        }
      } else {
        if (node.level === 0) {
          const res = await getyonghuxialaapi()
          return resolve(res.data.list)
        } else {
          return resolve([])
        }
      }
    },
    handleNodeClick(val) {
      this.bizOrgName = val.bizOrgName
      this.form.orgNo = val.bizOrgNo
      this.form.orgType = val.bizOrgType
      this.$refs.shou.blur()
    },
    async chongzhi() {
      await this.getchushihua()
      this.date = []
      this.gettime()
      this.getdatalist()
      this.form.alarmLevel = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.option {
  height: auto;

  // opacity: 0.1;
}
.dengji {
  padding-left: 10px;
}
.bigbox {
  background-color: #f1f1f1;
  padding: 10px;
  height: 100%;
  .topbox {
    background-color: #fff;
    padding: 20px;
    height: 80px;
  }
  .bodybox {
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
    height: calc(100% - 90px);
    .titlebox {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .text {
        font-weight: bold;
        font-size: 18px;
      }
    }
    .table{
      height: 88%;
    }
    .fenye {
      margin-top: 15px;
      text-align: right;
    }
  }
}
</style>
